<template>
    <div class="back" v-loading="loading">
        
    
    <div  align="center" >
        <div class="title">
                <span >
                    企业人员管理系统 - 员工修改信息
                </span>
        </div> 
        <div class="box">
                    工号：<el-input v-model="one.staffNumber" placeholder="请输入工号" class="inputBox" maxlength="10" :disabled="true"></el-input><br>
                    姓名：<el-input v-model="one.name" placeholder="请输入姓名" class="inputBox" maxlength="30" :disabled="true"></el-input><br>
                    密码：<el-button type="primary" style="margin-bottom:2%;width:30%" @click="goToPas()">点击此处跳转到修改密码页</el-button><br>
                    性别：<el-input v-model="one.sex" placeholder="请输入性别" class="inputBox" maxlength="2" :disabled="true"></el-input><br>
                    部门：<el-input v-model="one.department" placeholder="请输入部门" maxlength="30" class="inputBox" :disabled="true"></el-input><br>
                    电话：<el-input v-model="one.phoneNumber" placeholder="请输入11位电话号码" maxlength="11" class="inputBox" oninput="value=value.replace(/[^\d]/g,'')"></el-input><br>
                    邮箱：<el-input v-model="one.email" placeholder="请输入邮箱" maxlength="50" class="inputBox" ></el-input><br>
                    薪资：<el-input v-model="one.salary" placeholder="请输入薪资" maxlength="11" class="inputBox" oninput="value=value.replace(/[^\d]/g,'')" :disabled="true"></el-input><br>
                </div>
                <div style="text-align:center">
                    <span >
                        <el-button style="width:150px;margin-right:3%" @click="backToHome()">返回首页</el-button>
                        <el-button type="primary" style="width:150px" @click="updateStaff()">确 定</el-button>
                    </span>
                </div>
                
    </div>
   </div>
</template>

<script>
import { getOneData } from '@/api/table'
import { changeStaff } from '@/api/table'

   export default {
       data() {
           return {
               loading:false,

               one:'',

           };
       },
       created(){
           this.fetchData()
       },
       methods:{
           backToHome(){
               this.$router.push("/")
           },
           goToPas(){
               this.$router.push("/changePas")
           },
           updateStaff(){
               changeStaff(this.one)
               .then(res=>{
                   this.$message.success(res.data.data)
                   this.$router.push("/")
               })
           },
           fetchData(){
               this.loading=true
                getOneData({staffNumber:this.$store.getters.staffNumber})
                .then(res=>{
                    this.one=res.data.data
                })
                .then(()=>{
                    this.loading=false
                })
           },
       }
   }
</script>
<style scoped>
.back{
    background: url("../icons/background.jpg");
    background-size:cover;
    width:100%;
    height:100%
}
.box{
    margin-top: 2%;
    width:50%;  
}
.inputBox{
    width:70%;
    margin-bottom: 2%;
}
.title{
    font-size: 32px;
    color: darkgrey;
}
</style>